<template>
	<div>
		<tab-head class="cjy-slider" :tabindex="tabindex" :titleInfor="titleInfor" @tabOnChange="tabOnChange" :styleConfig='styleConfig'>
			<div slot="textBox" slot-scope="props" :class="{active :props.isActive}" class="cjy-test-header">
				<div class="cjy-text-inner" :style="props.isActive ? props.activeStyle : props.normalStyle">
					{{props.title}}
				</div>
			</div>
		</tab-head>
	</div>
</template>

<script>
	import TabHead from '@/real-components/TabHead/normal.vue'
	export default {
		data() {
			return {}
		},
		components: {
			TabHead
		},
		props: {
			titleInfor: {
				type: Array,
				//传入的数据如下 分类名称必传
				default: () => [{
						goodsClassId: "",
						goodsClassName: "分类"
					},
					{
						goodsClassId: "",
						goodsClassName: "分类"
					}, {
						goodsClassId: "",
						goodsClassName: "分类"
					},
					{
						goodsClassId: "",
						goodsClassName: "分类"
					},
					{
						goodsClassId: "",
						goodsClassName: "分类"
					},
					{
						goodsClassId: "",
						goodsClassName: "分类"
					},
					{
						goodsClassId: "",
						goodsClassName: "分类"
					},
					{
						goodsClassId: "",
						goodsClassName: "分类"
					}, {
						goodsClassId: "",
						goodsClassName: "分类"
					},
				]
			},
			custClick: {
				type: Function,
				default: () => {}
			},
			styleConfig: {
				type: Object,
				default: () => {
					return {
						activeColor: 'red',
						activeFontSize: '',
						activeBackgroundColor: 'transparent',
						activeBorderColor: '',
						normalColor: 'black',
						normalFontSize: '',
						normalBackgroundColor: 'transparent',
						normalBorderColor: 'transparent',
					}
				}
			},
			tabindex: {
				type: String,
				default: ''
			},

		},
		mounted() {
			
		},
		methods: {
			tabOnChange(index, item) {
				this.$emit('tabOnChange', index, item)
				//console.log(index, "1111111111")
				//      this.custClick(index, item);
				
			},
		},
		watch: {
			styleConfig() {},
			tabindex(){
				/*console.log(this.tabindex,"9999999999")*/
			}

		}
	}
</script>

<style scoped>
	.cjy-test-header {
		line-height: 1rem;
		height: 100%;
	}
	
	.cjy-slider {
		height: 2.15rem;
	}
	
	.cjy-text-inner {
		padding: 0.2rem 0.4rem;
		border-radius: 0.8rem;
		overflow: hidden;
		white-space: nowrap;
		word-break: break-all;
		text-overflow: clip;
	}
</style>